<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<bsl:layout-render name="/WEB-INF/jsp/common/layout.jsp">
	<bsl:layout-component name="html-head">

		<script
			src="<%=request.getContextPath()%>/js/jquery.imgareaselect.min.js"></script>

		<link rel="stylesheet" type="text/css"
			href="<%=request.getContextPath()%>/css/jquery.fileupload-ui.css" />
		<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/validation-horiz.css" />
		<link rel="stylesheet"
			href="<%=request.getContextPath()%>/css/jqtransform.css"
			type="text/css" media="all" />

		<script charset="utf-8"
			src="<%=request.getContextPath()%>/editor/kindeditor-min.js"></script>
		<script charset="utf-8"
			src="<%=request.getContextPath()%>/editor/lang/zh_CN.js"></script>

		<script src="<%=request.getContextPath()%>/js/jquery.ui.widget.js"></script>
		<script src="<%=request.getContextPath()%>/js/tmpl.js"></script>
		<script src="<%=request.getContextPath()%>/js/load-image.js"></script>
		<script src="<%=request.getContextPath()%>/js/canvas-to-blob.min.js"></script>
		<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
		<script
			src="<%=request.getContextPath()%>/js/bootstrap-image-gallery.js"></script>
		<script
			src="<%=request.getContextPath()%>/js/jquery.iframe-transport.js"></script>
		<!-- The basic File Upload plugin -->
		<script src="<%=request.getContextPath()%>/js/jquery.fileupload.js"></script>
		<!-- The File Upload file processing plugin -->
		<script src="<%=request.getContextPath()%>/js/jquery.fileupload-fp.js"></script>
		<!-- The File Upload user interface plugin -->
		<script src="<%=request.getContextPath()%>/js/jquery.fileupload-ui.js"></script>
		<script src="<%=request.getContextPath()%>/js/locale.js"></script>
		<script src="<%=request.getContextPath()%>/js/jquery.jqtransform.js"></script>
		<script src="<%=request.getContextPath()%>/js/validation.js" type="text/javascript"></script>


		<script language="Javascript">
	var contextPath = "<%=request.getContextPath()%>";

	var width;
	var height;
	var realWidth;
	var realHeight;
	var partX;
	var partY;
	function preview(img, selection) { 
		var scaleX = 100 / (selection.width * partX) ; 
		var scaleY = 100 / (selection.height * partY) ; 
		
		$('#thumbnail2').css({ 
			
			width: Math.round(scaleX * realWidth) + 'px', 
			height: Math.round(scaleY * realHeight) + 'px',
			marginLeft: '-' + Math.round(scaleX * selection.x1 * partX) + 'px', 
			marginTop: '-' + Math.round(scaleY * selection.y1 * partY) + 'px' 
		});

		var wTemp = selection.width * partX > realWidth ? realWidth : selection.width * partX;
		var hTemp = selection.height * partY > realHeight ? realHeight : selection.height * partY;

		$('#x1').val(selection.x1 * partX);
		$('#y1').val(selection.y1 * partY);
		$('#w').val(wTemp);
		$('#h').val(wTemp);
	} 

	$(document).ready(function () { 
		$('#save_thumb').click(function() {
			
			var x1 = Math.round($('#x1').val());
			var y1 = Math.round($('#y1').val()) ;
			var w = Math.round($('#w').val()) ;
			var h = Math.round($('#h').val()) ;
			var headPhoto = $('#headPhoto').val();
			if(w == 0) {
				w = realWidth;
			}
			if(h == 0) {
				h = realHeight;
			}
			var data = "p1.x="+x1 + "&p1.y=" + y1 + "&width="+ w + "&height=" + h + "&photo.id=" + headPhoto;
			if(w=="" || h==""){
				alert("You must make a selection first");
				return false;
			}else{
				$.ajax({ 
			          type: "POST", 
			          url: contextPath + "/fileUpload", 
			          data: data,
			          success: function(msg){ 
			          
			 			msg = msg.replace("[","").replace("]","");
			 			var obj = $.parseJSON(msg);
			 			$('#head').attr('src', contextPath + obj.mini_url);
			 			
			         } 
			     }); 
			}
		});
	}); 

	$(function () {
	    $('#fileupload').fileupload({
	    	url: '/harry/fileUpload',
	        dataType: 'json',
	        sequentialUploads: true,
	        autoUpload: true,
	        
	        done: function (e, data) {
	        
	    	 if (data.context) {
                 data.context.each(function (index) {
                 	
                     var file = ($.isArray(data.result) &&  data.result[index]) || {error: 'emptyResult'};
                     if (file.error) {
                         that._adjustMaxNumberOfFiles(1);
                     }
                     else
                     {
                         $('#thumbnail').attr('src', contextPath +file.middle_url );
                         $('#thumbnail2').attr('src', contextPath +file.url );
                         width = file.middle_width;
                         height = file.middle_height;
                         realWidth = file.large_width;
                         realHeight = file.large_height;
                         partX = realWidth/width;
                         partY = realHeight/height;
                         $('#thumbnail').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview }); 
                         $('#presentation').hide();
                         $('#presentation').find("tr").remove();
                         $('#photo').show();
                         $('#headPhoto').val(file.id);
                      }
                 });
	    	  }
	        }
	    });
	});

	function updateInfo(selfInfo) {
		$('#introduction').val(selfInfo);
		$('#readGender').hide();
		$('#readIntro').hide();
		$('#updateGender').show();
		$('#updateIntro').show();
		$('#btnSave').show("slow");
    }

    function cancelUpdate() {
        $('#introduction').val('');
    	$('#btnSave').hide();
    	$('#updateGender').hide();
    	$('#updateIntro').hide()
    	$('#readGender').show();
    	$('#readIntro').show();
    	
    }
    var introductVerify;
	 $(function(){
	
		 introductVerify = new LiveValidation('introduction' , {onlyOnBlur: true});
		 introductVerify.add( Validate.Length, { maximum:100,  tooLongMessage:"介绍不超过100字" } );
	});

	function updateMyInfo(form) {
		var a = LiveValidation.massValidate( [ introductVerify] );
		 var invalidSize = $('.LV_invalid_field').size();
		 if(invalidSize>0){
			 return;
		 }
		 form.submit();
	}

	</script>


	</bsl:layout-component>
	<bsl:layout-component name="title" />
	<bsl:layout-component name="content">
		<c:set var="contextPath" value="<%=request.getContextPath()%>"></c:set>
		<div class="wc_list_nod" style="margin: 20px 20px 20px 20px">
		<div>
		<div class="wbavatar"><a href="#" onclick="return false;"
			target="_blank"><img id="head" src="${contextPath}${user.headPhoto.thumbnailMini}" alt=""
			title=""></a><br></br>
		</div>

		<div class="wb_cmR comm_main">
		<div class="user_info">
		<div class="info_left">
		<h4>${user.userName}</h4>
		</div>

		<div class="info_right"></div>
		</div>
		<div class="comment_info">
		<form action="${contextPath}/updateMyInfo" method="POST">
		<table style="float: left;width: 100%">
			<tr >
				<td style="width: 40%">注册邮箱 :</td>
				<td style="width: 60%">${user.email}</td>
			</tr>
			<tr>
				<td>性别 :</td>
				<td>
					<div id="readGender" onclick="updateInfo('${user.selfIntro}')">
					 ${user.genderStr}
					</div>
				
						
					<c:if test="${user.gender == 0}"><c:set value="selected" var="male" /></c:if>
					<c:if test="${user.gender == 1}"><c:set value="selected" var="female" /></c:if>
						<div id="updateGender" class="gender-div" style="display: none">
						  <select style="width: 100px" name="user.gender">
						  	<option ${male} value="0">男</option>
						  	<option ${female} value="1">女</option>
						  </select>
						</div>
				
				</td>
			</tr>
			<tr>
				<td>注册时间 :</td>
				<td>
					<jsp:include page="../common/timeFormat.jsp">
							<jsp:param value="${user.createTime.time}" name="time"/>
							<jsp:param value="${user.createTime.year }" name="year"/>
							<jsp:param value="${user.createTime.month }" name="month"/>
							<jsp:param value="${user.createTime.day}" name="day"/>
							<jsp:param value="${user.createTime.hours}" name="hours"/>
							<jsp:param value="${user.createTime.minutes}" name="minutes"/>
							<jsp:param value="${user.createTime.date}" name="date"/>
						</jsp:include>
				</td>
			</tr>
			<tr>
				<td>介绍 :</td>
				<td>
					<div id="readIntro" onclick="updateInfo('${user.selfIntro}')">
						<c:choose>
							<c:when test="${empty user.selfIntro}">
								<span style="color: #bbb;"><i>添加介绍</i></span>
							</c:when>
							<c:otherwise>
								<span>${user.selfIntro}</span>
							</c:otherwise>
						</c:choose>
					</div>
					<div id="updateIntro" style="display: none">
						<textarea id="introduction" name="user.selfIntro" style="width: 100%" rows="4" cols="30" >${user.selfIntro}</textarea>
					</div>
					
				</td>
			</tr>
			<tr id="btnSave" style="display: none;background-color: #f5f5f5">
				<td colspan="2" align="right">
				    <input type="button" class="btn btn-info" value="取消" onclick="cancelUpdate()">
					<button type="button" class="btn btn-danger" onclick="updateMyInfo(this.form)" >保存</button>
				</td>
			</tr>
		</table>
		</form>
		</div>
		<div style="float: left; width: 75%" class="content_txt"></div>

		</div>
		</div>
		</div>
		<div style="clear: both"></div>
		<div style="margin:20px 20px 20px 20px;">
			<form  id="fileupload" action="${contextPath}/fileUpload" method="POST">
			<div class="control"><span
				class="btn btn-info fileinput-button"> <i
				class="icon-plus icon-white"></i> <span>换头像...</span> <input
				id="file" type="file" name="file"> </span></div>
	
			<div class="fileupload-loading"></div>
			<br>
			<!-- The table listing the files available for upload/download -->
			<table id="presentation" role="presentation"
				class="table table-striped">
				<tbody class="files" data-toggle="modal-gallery"
					data-target="#modal-gallery"></tbody>
			</table>
	
			</form>
	
	
			<div style="clear: both"></div>
			<div align="center" style="display: none" id="photo"><img src=""
				style="float: left; margin-right: 10px;" id="thumbnail"
				alt="Create Thumbnail" />
			<div style="float: left; position: relative; overflow: hidden; width: 100px; height: 100px;">
			   <img id="thumbnail2" src="" style="position: relative;" alt="Thumbnail Preview" />
			</div>
			<br style="clear: both;" />
			<form name="thumbnail" action="/jquery/image_upload_crop.php"
				method="post"><input type="hidden" name="headPhoto" value=""
				id="headPhoto" /> <input type="hidden" name="x1" value="" id="x1" />
			<input type="hidden" name="y1" value="" id="y1" /> 
			<input type="hidden" name="x2" value="" id="x2" /> 
			<input type="hidden" name="y2" value="" id="y2" /> 
			<input type="hidden" name="w" value="" id="w" /> 
			<input type="hidden" name="h" value="" id="h" /> 
			<input type="button" class="btn btn-info" name="upload_thumbnail" value="保存头像" id="save_thumb" /></form>
			</div>
		</div>
		



		<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td class="preview"><span class="fade"></span></td>
        <td class="name"><span>{%=formatName(file.name)%}</span></td>
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
            <td>
                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
            </td>
            <td class="start">{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary">
                    <i class="icon-upload icon-white"></i>
                    <span>{%=locale.fileupload.start%}</span>
                </button>
            {% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}
            <button class="btn btn-warning">
                <i class="icon-ban-circle icon-white"></i>
                <span>{%=locale.fileupload.cancel%}</span>
            </button>
        {% } %}</td>
    </tr>
{% } %}
</script>
		<script id="template-download" type="text/x-tmpl">

</script>
	</bsl:layout-component>
</bsl:layout-render>